import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(MyApp());
}

final GoRouter _router = GoRouter(
  initialLocation: '/',
  routes: [
    ShellRoute(
      builder: (context, state, child) {
        return HomePage(child);
      },
      routes: [
        ShellRoute(
          builder: (context, state, child) {
            return Page1(child);
          },
          routes: [
            GoRoute(
              path: '/',
              builder: (context, state) {
                return Page2(); // 左侧页面
              },
            ),
          ],
        ),
        GoRoute(
          path: '/page3', // 新页面路径
          builder: (context, state) {
            return Page3(); // 新页面
          },
        )
      ],
    ),
  ],
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

class HomePage extends StatelessWidget {
  final Widget child;

  HomePage(this.child);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(child: child), // 上部的 ShellRoute
          Container(
            height: 100,
            color: Colors.blueAccent, // 下部的蓝色部分
          ),
        ],
      ),
    );
  }
}

class Page1 extends StatelessWidget {
  final Widget child;

  Page1(this.child);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: 200,
          color: Colors.cyan,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextButton(
                  onPressed: () {
                    context.go('/page3'); // 导航到 Page3
                  },
                  child: Text('btn1'),
                ),
                TextButton(onPressed: () {}, child: Text('btn2')),
                TextButton(onPressed: () {}, child: Text('btn3')),
              ],
            ),
          ),
        ), // 左侧部分
        Expanded(
          child: child,
        ),
      ],
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.pinkAccent,
    );
  }
}

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.orangeAccent,
      child: Center(
        child: Text('This is Page 3', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}
